<template>
	<div class="page-info">
		<div class="search">
			<div class="search-box">
				<a-form
					:model="searchInfo"
					:label-col="labelCol"
					:wrapper-col="wrapperCol"
				>
					<a-row :gutter="24">
						<a-col :span="8">
							<a-form-item
								:name="labelMap['keyword'].name"
								:label="labelMap['keyword'].label"
							>
								<a-input
									style="width: 90%; margin-left: 8px"
									v-model:value="searchInfo.keyword"
									:placeholder="'请填写用户编码/用户电话'"
									allow-clear
								/>
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item
								:name="labelMap['orderNumber'].name"
								:label="labelMap['orderNumber'].label"
							>
								<a-input
									style="width: 90%; margin-left: 8px"
									v-model:value="searchInfo.orderNumber"
									:placeholder="'请填写' + labelMap['orderNumber'].label"
									allow-clear
									@change="debouncedQuery"
								/>
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item
								:name="labelMap['status'].name"
								:label="labelMap['status'].label"
							>
								<a-input
									style="width: 90%; margin-left: 8px"
									v-model:value="searchInfo.status"
									:placeholder="'请填写' + labelMap['status'].label"
									allow-clear
								/>
							</a-form-item>
						</a-col>
					</a-row>
					<a-row :gutter="24">
						<a-col :span="24" style="text-align: right; margin-bottom: 20px">
							<a-space>
								<a-button type="primary" @click="debouncedQuery">
									查找</a-button
								>
								<a-button type="primary" @click="cancelQuery">清空</a-button>
							</a-space>
						</a-col>
					</a-row>
				</a-form>
			</div>
		</div>
		<div class="button" style="margin: 10px">
			<a-space>
				<!-- <a-button type="primary" @click="editOrderInfo('add')">新增</a-button> -->
				<!-- <a-button type="primary" danger @click="batchDelOrderInfo"
					>删除</a-button
				> -->
			</a-space>
		</div>
		<div class="content">
			<a-table
				:dataSource="dataSource"
				:columns="columns"
				:loading="loading"
				:row-key="(record) => record.id"
				:pagination="pagination"
				@change="handleTableChange"
				:scroll="{ y: 470, x: 'max-content' }"
				:row-selection="rowSelection"
			>
				<template #bodyCell="{ column, record }">
					<template v-if="column.key === 'operation'">
						<a-space>
							<a-popconfirm
								title="确认通过?"
								ok-text="确认"
								cancel-text="取消"
								@confirm="passOrderOrderInfo(record)"
								@cancel="cancel"
								v-if="record.status === 'PENDING'"
							>
								<a-button
									type="primary"
									size="small"
									:loading="record.passOrderLoading"
									>通过</a-button
								>
							</a-popconfirm>
							<a-popconfirm
								title="确认删除?"
								ok-text="确认"
								cancel-text="取消"
								@confirm="delOrderInfo(record.id)"
								@cancel="cancel"
								v-if="record.status === 'PENDING'"
							>
								<a-button type="primary" size="small" danger>删除</a-button>
							</a-popconfirm>
						</a-space>
						<span></span>
					</template>
					<template v-else-if="column.key === 'paymentTime'">
						{{
							record.paymentTime ?
								dayjs(record.paymentTime).format('YYYY-MM-DD HH:mm:ss')
							:	''
						}}
					</template>
					<template v-else-if="column.key === 'status'">
						<a-tag :color="record.status === 'PAID' ? 'green' : 'red'">
							{{ record.status === 'PAID' ? '已支付' : '未支付' }}
						</a-tag>
					</template>
					<template v-else-if="column.key === 'type'">
						{{ getTypeName(record.type) }}
					</template>
				</template>
			</a-table>
			<OrderInfoDetail
				ref="editInfo"
				:open="visible"
				:modelInfo="modelInfo"
				@handleOk="handleOk"
				@handleCancel="handleCancel"
			></OrderInfoDetail>
		</div>
	</div>
</template>
<script setup lang="ts">
import {
	SearchInfo,
	pagination,
	columns,
	DataItem,
	ModelInfo,
	pageInfo,
	labelMap,
	getTypeName,
} from './orderInfoListTs';
import {
	getOrderInfoPage,
	deleteOrderInfo,
} from '@/api/orderInfo/orderInfo/orderInfoTs';
import { message } from 'ant-design-vue';
import { debounce } from '@/utils/common';
import dayjs from 'dayjs';
import { passOrderInfo } from '@/api/userBalanceInfo/index';

const labelCol = ref({ span: 5 });
const wrapperCol = ref({ span: 19 });

let rowIds = [] as any;

const rowSelection = ref({
	checkStrictly: false,
	onChange: (
		selectedRowKeys: (string | number)[],
		selectedRows: DataItem[],
	) => {
		rowIds = selectedRowKeys;
	},
	onSelect: (record: DataItem, selected: boolean, selectedRows: DataItem[]) => {
		console.log(record, selected, selectedRows);
	},
	onSelectAll: (
		selected: boolean,
		selectedRows: DataItem[],
		changeRows: DataItem[],
	) => {
		console.log(selected, selectedRows, changeRows);
	},
});

let searchInfo = ref<SearchInfo>({});

const cancelQuery = (): void => {
	searchInfo.value = {};
};

const query = (): void => {
	getOrderInfoListPage(searchInfo.value, pagination.value);
};

// 创建防抖查询方法
const debouncedQuery = debounce(query, 300);

const handleTableChange = (pagination): void => {
	getOrderInfoListPage(searchInfo.value, pagination);
};

const delOrderInfo = (ids: string): void => {
	deleteOrderInfo(ids).then((res) => {
		if (res.code == '200') {
			message.success((res && '删除' + res.message) || '删除成功！', 3);
			getOrderInfoListPage(searchInfo.value, pagination.value);
		} else {
			message.error((res && res.message) || '删除失败！', 3);
		}
	});
};

const passOrderOrderInfo = async (record: any): Promise<void> => {
	record.passOrderLoading = true;
	let params = {
		orderId: record.orderNumber,
		attach: record.type === 'create_dating_top' ? 'create_dating' : record.type,
    commission: false,
	};
	const { code, message: messageInfo } = await passOrderInfo(params).finally(
		() => (record.passOrderLoading = false),
	);
	if (code == '200') {
		getOrderInfoListPage(searchInfo.value, pagination.value);
	} else {
		message.error(messageInfo || '审核失败！');
	}
};

let loading = ref<boolean>(false);

let dataSource = ref();

const cancel = (e: MouseEvent): void => {
	console.log(e);
};

const getOrderInfoListPage = (param: SearchInfo, cur: pageInfo): void => {
	loading.value = true;
	getOrderInfoPage(param, cur.current, cur.pageSize)
		.then((res) => {
			if (res.code == '200') {
				dataSource.value = res.data.records.map((item: any) => ({
					...item,
					passOrderLoading: false,
				}));
				pagination.value.current = res.data.current;
				pagination.value.pageSize = res.data.size;
				pagination.value.total = res.data.total;
			} else {
				message.error((res && res.message) || '查询列表失败！');
			}
		})
		.finally(() => {
			loading.value = false;
		});
};

const init = (): void => {
	//获取订单表页面数据
	getOrderInfoListPage(searchInfo.value, pagination.value);
};

init();

let visible = ref<boolean>(false);

let modelInfo = ref<ModelInfo>({});

//新增和修改弹窗
const editOrderInfo = (type: string, id?: number): void => {
	if (type == 'add') {
		modelInfo.value.title = '新增明细';
		modelInfo.value.id = undefined;
	} else if (type == 'update') {
		modelInfo.value.title = '修改明细';
		modelInfo.value.id = id;
	}
	modelInfo.value.confirmLoading = true;
	visible.value = true;
};

const handleOk = (v: boolean): void => {
	visible.value = v;
	getOrderInfoListPage(searchInfo.value, pagination.value);
};

const handleCancel = (v: boolean): void => {
	visible.value = v;
};
</script>
<style lang="scss" scoped></style>
